<template>
  <view class="device">
    <view class="card">
      <view class="card-title">
        <image
          src="../../../static/images/zs_icon.png"
          mode="widthFix"
          style="width: 32rpx; height: 32rpx; margin-right: 12rpx"
        ></image
        >实时数据</view
      >
      <view class="card-title-sub">更新时间：{{ date }}</view>

      <view class="charts-box-wrap">
        <view class="charts-box">
          <qiun-data-charts
            type="arcbar"
            :opts="allOpts"
            :chartData="allData"
          />
        </view>
        <view class="charts-box">
          <qiun-data-charts
            type="arcbar"
            :opts="onlineOpts"
            :chartData="onlineData"
          />
        </view>
        <view class="charts-box">
          <qiun-data-charts
            type="arcbar"
            :opts="offlineOpts"
            :chartData="offlineData"
          />
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, withDefaults, defineProps } from 'vue'
import { formatDate } from '../../../utils/common'

interface UserInfo {
  deviceCount?: number
  [key: string]: any
}

const props = withDefaults(defineProps<{ userInfo: UserInfo }>(), {
  userInfo: () => ({}),
})

// 响应式变量
const date = ref<string>("")

const opts = reactive({
  color: [
    "#1890FF",
    "#91CB74",
    "#FAC858",
    "#EE6666",
    "#73C0DE",
    "#3CA272",
    "#FC8452",
    "#9A60B4",
    "#ea7ccc",
  ],
  padding: undefined,
  title: {
    name: "0台",
    fontSize: 14,
    color: "#2fc25b",
  },
  subtitle: {
    name: "全部设备",
    fontSize: 12,
    color: "#666666",
  },
})

// 注意：这里使用 ...opts 拷贝初始值
const allOpts = reactive({
  ...opts,
  title: {
    name: "20台",
    fontSize: 14,
    color: "#2C7AF5",
  },
  subtitle: {
    name: "全部设备",
    fontSize: 12,
    color: "#666666",
  },
  extra: {
    arcbar: {
      type: "circle",
      width: 12,
      backgroundColor: "#E9E9E9",
      startAngle: 0.75,
      endAngle: 0.25,
      gap: 2,
      lineCap: "butt",
    },
  },
})

const onlineOpts = reactive({
  ...opts,
  title: {
    name: "20台",
    fontSize: 14,
    color: "#FF6633",
  },
  subtitle: {
    name: "在线设备",
    fontSize: 12,
    color: "#666666",
  },
  extra: {
    arcbar: {
      type: "circle",
      width: 12,
      backgroundColor: "#E9E9E9",
      startAngle: 0.75,
      endAngle: 0.25,
      gap: 2,
      lineCap: "butt",
    },
  },
})

const offlineOpts = reactive({
  ...opts,
  title: {
    name: "0台",
    fontSize: 14,
    color: "#333",
  },
  subtitle: {
    name: "离线设备",
    fontSize: 12,
    color: "#666666",
  },
  extra: {
    arcbar: {
      type: "circle",
      width: 12,
      backgroundColor: "#E9E9E9",
      startAngle: 0.75,
      endAngle: 0.25,
      gap: 2,
      lineCap: "butt",
    },
  },
})

const chartData = reactive({
  series: [
    {
      name: "正确率",
      color: "#2C7AF5",
      data: 0.8,
    },
  ],
})

const allData = reactive({
  series: [
    {
      name: "全部设备",
      color: "#2C7AF5",
      data: 0.8,
    },
  ],
})

const onlineData = reactive({
  series: [
    {
      name: "在线设备",
      color: "#FF6633",
      data: 0.8,
    },
  ],
})

const offlineData = reactive({
  series: [
    {
      name: "离线设备",
      color: "#999",
      data: 0.8,
    },
  ],
})

// mounted 钩子
onMounted(() => {
  date.value = formatDate(new Date())
  // 根据传入的 userInfo.deviceCount 更新 allOpts 和 onlineOpts 的 title.name
  const deviceCount = props.userInfo.deviceCount || 0
  allOpts.title = {
    ...allOpts.title,
    name: deviceCount + "台",
  }
  onlineOpts.title = {
    ...onlineOpts.title,
    name: deviceCount + "台",
  }
})
</script>


<style scoped lang="scss">
.device {
  // padding: 20rpx;
  width: 100%;
  height: 100%;
  // background-color: #f5f5f5;
  .card {
    box-sizing: border-box;
    width: calc(100% - 40rpx);
    margin: 0 auto;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 20rpx;

    .card-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #222;
      margin-bottom: 20rpx;
    }
    .card-title-sub {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 32rpx;
    }
  }
  .charts-box-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .charts-box {
    width: 33%;
    height: 120px;
  }
}
</style>
